<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Ashion Template">
    <meta name="keywords" content="Ashion, unica, creative, html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ashion | Template</title>

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap"
          rel="stylesheet">

    <!-- Css Styles -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/elegant-icons.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/magnific-popup.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/owl.carousel.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/slicknav.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/style-1.css}" type="text/css">
</head>

<body>
    <!-- Page Preloder -->
    <div th:replace="~{comm/common::preloader}"/>

    <!-- Offcanvas Menu Begin -->
    <div class="offcanvas-menu-overlay"></div>
    <div th:replace="~{comm/common::offcanvas}"/>
    <!-- Offcanvas Menu End -->

    <!-- Header Section Begin -->
    <header class="header" th:replace="~{comm/common::header}"/>
    <!-- Header Section End -->

    <!-- Breadcrumb Begin -->
    <div class="breadcrumb-option" th:replace="~{comm/common::breadcrumb}"/>
    <!-- Breadcrumb End -->

    <!-- Product Details Section Begin -->
    <section class="product-details spad">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="product__details__pic">
                        <div class="product__details__pic__left product__thumb nice-scroll">
                            <th:block th:each="image,cur:${images}">
                            <a class="pt " th:classappend="${cur.index == 0 ? 'active':''}" th:href="@{'#product-'(${cur})}">
                                <img th:src="${image}" alt="">
                            </a>
                            </th:block>
<!--                            <a class="pt" href="#product-2">-->
<!--                                <img src="img/product/details/thumb-2.jpg" alt="">-->
<!--                            </a>-->
<!--                            <a class="pt" href="#product-3">-->
<!--                                <img src="img/product/details/thumb-3.jpg" alt="">-->
<!--                            </a>-->
<!--                            <a class="pt" href="#product-4">-->
<!--                                <img src="img/product/details/thumb-4.jpg" alt="">-->
<!--                            </a>-->
                        </div>
                        <div class="product__details__slider__content">
                            <th:block th:each="image,cur:${images}">
                            <div class="product__details__pic__slider owl-carousel">
                                <img th:data-hash="'product-'+${cur.index}" class="product__big__img" th:src="${image}" alt="">
<!--                                <img data-hash="product-2" class="product__big__img" src="img/product/details/product-3.jpg" alt="">-->
<!--                                <img data-hash="product-3" class="product__big__img" src="img/product/details/product-2.jpg" alt="">-->
<!--                                <img data-hash="product-4" class="product__big__img" src="img/product/details/product-4.jpg" alt="">-->
                            </div>
                            </th:block>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="product__details__text">
                        <h3 th:text="${item.name}">Essential structured blazer
<!--                            <span>Brand: SKMEIMore Men Watches from SKMEI</span>-->
                        </h3>
                        <div class="rating">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <span>( 138 reviews )</span>
                        </div>
                        <div class="product__details__price" th:text="${item.priceSell}">$ 75.0
                            <span th:text="stock.priceIn">$ 83.0</span>
                        </div>
                        <p th:text="${item.detail}">Nemo enim ipsam voluptatem quia aspernatur aut odit aut loret fugit, sed quia consequuntur
                        magni lores eos qui ratione voluptatem sequi nesciunt.</p>
                        <div class="product__details__button">
                            <div class="quantity">
                                <span>数量:</span>
                                <div class="pro-qty">
                                    <input type="text" value="1">
                                </div>
                            </div>
                            <a href="#" class="cart-btn"><span class="icon_bag_alt"></span> Add to cart</a>
                            <ul>
                                <li><a href="#"><span class="icon_heart_alt"></span></a></li>
                                <li><a href="#"><span class="icon_adjust-horiz"></span></a></li>
                            </ul>
                        </div>
                        <div class="product__details__widget">
                            <ul>
                                <li>
                                    <span>库存量:</span>
                                    <div class="stock__checkbox">
                                        <label for="stockin" th:text="${stock.inventory}">
                                            In Stock
                                            <input type="checkbox" id="stockin">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                </li>

                                <li>
                                    <span>
                                        限购数量:
                                    </span>
                                    <label th:text="${stock.inventoryWarn}"/>
                                </li>
<!--                                <li>-->
<!--                                    <span>Available color:</span>-->
<!--                                    <div class="color__checkbox">-->
<!--                                        <label for="red">-->
<!--                                            <input type="radio" name="color__radio" id="red" checked>-->
<!--                                            <span class="checkmark"></span>-->
<!--                                        </label>-->
<!--                                        <label for="black">-->
<!--                                            <input type="radio" name="color__radio" id="black">-->
<!--                                            <span class="checkmark black-bg"></span>-->
<!--                                        </label>-->
<!--                                        <label for="grey">-->
<!--                                            <input type="radio" name="color__radio" id="grey">-->
<!--                                            <span class="checkmark grey-bg"></span>-->
<!--                                        </label>-->
<!--                                    </div>-->
<!--                                </li>-->
                                <li>
                                    <span>规格:</span>
                                    <div class="size__btn">
                                        <label for="xs-btn" class="active">
                                            <input type="radio" id="xs-btn">
                                            xs
                                        </label>
                                        <label for="s-btn">
                                            <input type="radio" id="s-btn">
                                            s
                                        </label>
                                        <label for="m-btn">
                                            <input type="radio" id="m-btn">
                                            m
                                        </label>
                                        <label for="l-btn">
                                            <input type="radio" id="l-btn">
                                            l
                                        </label>
                                    </div>
                                </li>
                                <li>
                                    <span>活动:</span>
                                    <p class="warning">免邮费</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="product__details__tab">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">Description</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Specification</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Reviews ( 2 )</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tabs-1" role="tabpanel">
                                <h6>描述</h6>
                                <p th:text="${item.detail}">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed
                                    quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt loret.
                                    Neque porro lorem quisquam est, qui dolorem ipsum quia dolor si. Nemo enim ipsam
                                    voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed quia ipsu
                                    consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nulla
                                consequat massa quis enim.</p>
                            </div>
                            <div class="tab-pane" id="tabs-2" role="tabpanel">
                                <h6>规格说明</h6>
                                <p th:text="${item.detail}">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed
                                    quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt loret.
                                    Neque porro lorem quisquam est, qui dolorem ipsum quia dolor si. Nemo enim ipsam
                                    voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed quia ipsu
                                    consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nulla
                                consequat massa quis enim.</p>
                            </div>
                            <div class="tab-pane" id="tabs-3" role="tabpanel">
                                <h6>Reviews ( 2 )</h6>
                                <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed
                                    quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt loret.
                                    Neque porro lorem quisquam est, qui dolorem ipsum quia dolor si. Nemo enim ipsam
                                    voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed quia ipsu
                                    consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nulla
                                consequat massa quis enim.</p>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
                                    dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
                                    nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
                                quis, sem.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--  相关商品  -->
<!--            <div class="row">-->
<!--                <div class="col-lg-12 text-center">-->
<!--                    <div class="related__title">-->
<!--                        <h5>RELATED PRODUCTS</h5>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-lg-3 col-md-4 col-sm-6">-->
<!--                    <div class="product__item">-->
<!--                        <div class="product__item__pic set-bg" data-setbg="img/product/related/rp-1.jpg">-->
<!--                            <div class="label new">New</div>-->
<!--                            <ul class="product__hover">-->
<!--                                <li><a href="img/product/related/rp-1.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
<!--                                <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
<!--                                <li><a href="#"><span class="icon_bag_alt"></span></a></li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                        <div class="product__item__text">-->
<!--                            <h6><a href="#">Buttons tweed blazer</a></h6>-->
<!--                            <div class="rating">-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                            </div>-->
<!--                            <div class="product__price">$ 59.0</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-lg-3 col-md-4 col-sm-6">-->
<!--                    <div class="product__item">-->
<!--                        <div class="product__item__pic set-bg" data-setbg="img/product/related/rp-2.jpg">-->
<!--                            <ul class="product__hover">-->
<!--                                <li><a href="img/product/related/rp-2.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
<!--                                <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
<!--                                <li><a href="#"><span class="icon_bag_alt"></span></a></li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                        <div class="product__item__text">-->
<!--                            <h6><a href="#">Flowy striped skirt</a></h6>-->
<!--                            <div class="rating">-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                            </div>-->
<!--                            <div class="product__price">$ 49.0</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-lg-3 col-md-4 col-sm-6">-->
<!--                    <div class="product__item">-->
<!--                        <div class="product__item__pic set-bg" data-setbg="img/product/related/rp-3.jpg">-->
<!--                            <div class="label stockout">out of stock</div>-->
<!--                            <ul class="product__hover">-->
<!--                                <li><a href="img/product/related/rp-3.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
<!--                                <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
<!--                                <li><a href="#"><span class="icon_bag_alt"></span></a></li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                        <div class="product__item__text">-->
<!--                            <h6><a href="#">Cotton T-Shirt</a></h6>-->
<!--                            <div class="rating">-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                            </div>-->
<!--                            <div class="product__price">$ 59.0</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-lg-3 col-md-4 col-sm-6">-->
<!--                    <div class="product__item">-->
<!--                        <div class="product__item__pic set-bg" data-setbg="img/product/related/rp-4.jpg">-->
<!--                            <ul class="product__hover">-->
<!--                                <li><a href="img/product/related/rp-4.jpg" class="image-popup"><span class="arrow_expand"></span></a></li>-->
<!--                                <li><a href="#"><span class="icon_heart_alt"></span></a></li>-->
<!--                                <li><a href="#"><span class="icon_bag_alt"></span></a></li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                        <div class="product__item__text">-->
<!--                            <h6><a href="#">Slim striped pocket shirt</a></h6>-->
<!--                            <div class="rating">-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                                <i class="fa fa-star"></i>-->
<!--                            </div>-->
<!--                            <div class="product__price">$ 59.0</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </section>
    <!-- Product Details Section End -->

    <!-- Instagram Begin -->
    <div class="instagram" th:replace="~{comm/common::ins}"/>
    <!-- Instagram End -->

    <!-- Footer Section Begin -->
    <footer class="footer" th:replace="~{comm/common::footer}"/>
    <!-- Footer Section End -->

    <!-- Search Begin -->
    <div class="search-model" th:replace="~{comm/common::search}"/>
    <!-- Search End -->

    <!-- Js Plugins -->
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/js/jquery-ui.min.js}"></script>
    <script th:src="@{/js/mixitup.min.js}"></script>
    <script th:src="@{/js/jquery.countdown.min.js}"></script>
    <script th:src="@{/js/jquery.slicknav.js}"></script>
    <script th:src="@{/js/owl.carousel.min.js}"></script>
    <script th:src="@{/js/jquery.nicescroll.min.js}"></script>
    <script th:src="@{/js/main-1.js}"></script>
    <script>
        $(document).ready(function(){
            let res = 0
            $.ajax({
                type:'get',
                url:"/cart/checkAmount",
                async:false,
                success:function(result){
                    console.log(result)
                    res = result
                    $('#cartNum').text(res)
                }});
        })
    </script>

</body>

</html>
